<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>演示</title>
    <link rel="stylesheet" href="images/style.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.eslider.js"></script>
</head>
<body>
<div class="edrcon-bottombox edrcon-botconqie">
  <div class="edrsz-conbox">
    <div class="edrsz-line">
      <span>初始视角：</span>
      <input type="text" class="linktxt edrsz-zdkd greenfont" id="default_fov" value="90">
    </div>
    <div class="edrsz-hdtbox" id="fov-setting" style="position: relative;">
                    	<span class="edrszs-huadbg bbox">
                            <span class="edrszs-hdtopjt cslider" style=""><img src="images/slidimg1.png" draggable="false"></span>
                            <em class="tbox" style=""></em>
                        <span class="edrszs-hdljt lslider" ><img src="images/slidimg2.png" draggable="false"></span>
                        <span class="edrszs-hdrjt rslider"><img src="images/slidimg3.png" draggable="false"></span>
                        </span>

    </div>
    <div class="edrsz-fontbox clearfix">
                    	<span class="edrsz-fovsz left">
                        	<em>限制最近</em>
                            <input type="text" class="linktxt edrsz-zdkd" id="lmin_fov" value="90">
                        </span>
                        <span class="edrsz-fovsz right">
                        	<em>限制最远</em>
                            <input type="text" class="linktxt edrsz-zdkd" id="lmax_fov" value="120">
                        </span>
    </div>
  </div>
</div>
&nbsp;<br/>
&nbsp;<br/>
&nbsp;<br/>
<div class="edrcon-bottombox edrcon-botconqie">
    <div class="edrsz-conbox">
        <div class="edrsz-hdtbox" id="vlook-setting" style="position: relative;">
                    	<span class="edrszs-huadbg bbox">
                            <em class="tbox" style=""></em>
                        <span class="edrszs-hdljt lslider" style=""><img src="images/slidimg2.png" draggable="false"></span>
                        <span class="edrszs-hdrjt rslider" style=""><img src="images/slidimg3.png" draggable="false"></span>
                        </span>
        </div>
        <div class="edrsz-fontbox clearfix">
                    	<span class="edrsz-fovsz left">
                        	<em>限制最近</em>
                            <input type="text" class="linktxt edrsz-zdkd" id="lmin_vlook" value="-60">
                        </span>
                        <span class="edrsz-fovsz right">
                        	<em>限制最远</em>
                            <input type="text" class="linktxt edrsz-zdkd" id="lmax_vlook" value="90">
                        </span>
        </div>
    </div>
</div>
<script>
    $(function(){
        $("#fov-setting").eslider({
            debug: true,
            value: 85,
            min: 50,
            max: 180,
            lmin: 70,
            lmax: 160,
            callback: function(d) {
                //console.trace();
                $("#default_fov").val(d.value);
                $("#lmin_fov").val(d.lmin);
                $("#lmax_fov").val(d.lmax);
            }
        });
        $("#vlook-setting").eslider({
            min: -60,
            max: 90,
            lmin: -60,
            lmax:90,
            callback: function(d) {
                $("#lmin_vlook").val(d.lmin);
                $("#lmax_vlook").val(d.lmax);
            }
        });
    })
</script>
</body>
</html>